<template>
  <div class="guize-box">
      <div class="xx">
          <img @click="hide()" src="../../assets/img/x.png"/>
      </div>
      <div class="gz-home">
          <div class="gz-bg">
            <div class="gz-content" :style="computeStyle">
              <div class="c-head"></div>
              <div class="body-box">
                <div class="c-body" ref="wrapper">
                    <div class="ss">

                        <div class="pp" v-for="v in $store.state.rule" :key="v.id">
                          <div class="title">
                            {{v.title}}
                          </div>
                          <div class="body">
                            <h1 v-for="v2 in v.ruleBodies" :key="v2.id">
                              <div v-if="v2.id === 1">
                                {{v2.body | fmt}}
                              </div>
                              <div v-else>
                                {{ v2.body }}
                              </div>
                            </h1>
                          </div>
                        </div>
                      
                      </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
import '../../assets/css/index.less'
import { mapMutations, mapGetters, mapActions } from 'vuex'
import Bscroll from 'better-scroll'
import moment from 'moment'
export default {
  name: 'guizeBox',
  computed: {
    computeStyle() {
      let ss = ((document.documentElement.clientWidth*0.9)*(1051/679))>document.documentElement.clientHeight-document.documentElement.clientHeight*0.07?(document.documentElement.clientHeight-document.documentElement.clientHeight*0.08)+"px":(document.documentElement.clientWidth*0.9)*(1051/679)+"px"
      return { 
        backgroundSize: this.clientHeight/this.clientWidth > 1.55 ? "100% auto" : "100% 100%" ,
        height: ss
        }
    },

  },
  data () {
    return {
      scroll: '',
      clientHeight: document.documentElement.clientHeight,
      clientWidth: document.documentElement.clientWidth,
    }
  },
  mounted() {
    this.clientHeight = document.documentElement.clientHeight;
    this.clientWidth = document.documentElement.clientWidth;
    this.$nextTick(() => { 
      setTimeout(function(that){
        let t = that
        return function(){
          t.scroll = new Bscroll(t.$refs.wrapper, {
            bounce: true,             //回弹动画
          })
        }
      }(this),200)
    }) 
  },
  filters: {
      fmt(times) {
          let tt = times.split(",")
          var tt1 = moment(tt[0]).format("YYYY年MM月DD日")
          var tt2 = moment(tt[1]).format("YYYY年MM月DD日")
          let data = tt1+"-"+tt2
          return data;
      }
  },
  update(){
    this.scroll.refresh()
  },
  methods:{
      ...mapActions({              
        selRule: 'SEL_RULE',
      }),
      toUpdate:function(){
        this.scroll.refresh()
      },
      hide:function(){
        this.hideGuize()
      },
      show:function(){
        this.showGuize()
      },
      ...mapMutations({                 //引入 修改状态的方法  就可以用 this.setSinger()     //来进行修改状态(状态改变会自动渲染你所关联的组件)         
            hideGuize: 'HIDE_GZ',
            showGuize: 'SHOW_GZ'
    }),
  }

}
</script>